<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>匹配所有 input, textarea, select 和 button 元素</title>
		<style>
			*{
				font-size: 14px;
				font-family: "微软雅黑";
				margin-top: 10px;
			}
			
			label{
				display: block;
				font-size: 14px;
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: left;
				display: block;
				cursor: pointer;
				width: 350px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			label:hover{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<form>
	    <input type="button" value="Input-Button"/> 
	    <br>
	    	
	        爱好:
	    <input type="checkbox" value="checkbox-1" />读书
	    <input type="checkbox" value="checkbox-2" />写字
	    <br>
	    	
	        附件：<input type="file" />
	    <br>
	    	
	    <input type="hidden" value="input-hidden" />
	    <br>
	    	
	    <input type="image" src="../../../img/banner.png" />
	    <br>
	
	    <input type="password" value="input-password" />
	    <br>
	    	性别：
	    	<input type="radio" value="radio-1" />男
	    	<input type="radio" value="radio-2" />女
	    <br>
	    <input type="reset" value="reset" />
	    <br>
	
	    <input type="submit" value="submit" />
	    <br>
	    <input type="text" value="text" />
	    <br>
	    <select>
	    	<option>Select-Option</option>
	    </select>
	    <br>
	
	    <textarea>多行文本框</textarea>
	    <br>
	    <button>Button</button>
	
	
		<label onclick="search()">匹配所有单行文本框</label>
	</form>
	</body>
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
		//匹配唯一的子元素
		function search(){
			var elements = $(":text");
			elements.css("border","3px solid red");
			
			elements.each(function(index,data){
				
				var value = data.value;
				if(data.nodeName =='SELECT'){
					value= data.options[0].text;
				}else if(data.nodeName =='TEXTAREA' || data.nodeName =='BUTTON' ){
					value=data.textContent;
				}else if(data.getAttribute("type") =='image'){
					value=data.getAttribute("src");
				}
				console.log("index=["+index+"],nodeName=["+data.nodeName+"],type=["+data.getAttribute("type")+"],value=["+value+"]");
			});
		}
		
	</script>
</html>

